import React, { Component } from 'react'
// 相当于 app.vue
import logo from './logo.svg';
import './App.css';
// 1. 引入组件
import ComA from './components/ComA.jsx'
import ComB from './components/ComB.jsx'
import ComBig from './components/ComBig.jsx'
import ComC from './components/ComC.jsx'
import ComFrom from './components/ComFrom.jsx'
import ComRef from './components/ComRef.jsx'
import ComD from './components/ComD.jsx'
import Transition1 from './components/Transition1.jsx'
import Transition2 from './components/Transition2.jsx'
import Transition3 from './components/Transition3.jsx'
import Router from './route/Router'
import { NavLink, Link, withRouter } from 'react-router-dom'

class App extends Component {
  // let name = 'MaBaoguo';
  // let age = 70;
  // let hasWude = true;
  // let kongFu = [
  //   '接化发',
  //   '有备而来',
  //   '大意了没有闪',
  //   '窝里斗',
  //   '很快啊'
  // ];
  // let person = {
  //   name: 'Mabaoguo',
  //   age: 70,
  //   title: '形意八卦掌门人',
  //   hasWude: false
  // }
  // let fs = '80px';
  // let style1 = {
  //   color: 'red'
  // }
  changePage(url) {
    // console.log(this.props.history);
    this.props.history.push(url);
  }
  render() {
    return (
      <div className="App">
        {/* vue中的路由出口是<router-view /> */}
        <Router></Router>
        {/* exact严格匹配。每个字符串都符合，才会带上active的class */}
        {/* activeClassName：可以自定义激活时的class */}
        <NavLink activeClassName="act" exact to="/">返回首页</NavLink><br />
        <NavLink activeClassName="act" to="/pathparams?id=1&name=jack">返回PathParams1</NavLink><br />
        <NavLink activeClassName="act" to={{
          pathname: "/pathparams",
          state: {
            id: 2,
            name: 'Tom'
          }
        }}>返回PathParams2</NavLink><br />
        <NavLink activeClassName="act" to="/transition1">返回Transition1</NavLink><br />
        <NavLink activeClassName="act" to="/transition2">返回Transition2</NavLink><br />
        <NavLink activeClassName="act" to="/transition3">返回Transition3</NavLink><br />
        <hr />
        <button onClick={() => this.changePage('/')}>返回首页</button>
        <button onClick={() => this.changePage('/transition1')}>返回Transition1</button>
        <button onClick={() => this.changePage('/transition2')}>返回Transition2</button>
        <button onClick={() => this.changePage('/transition3')}>返回Transition3</button>
        {/* <ComA></ComA> */}
        {/* <ComB></ComB> */}
        {/* <ComC></ComC> */}
        {/* <ComBig></ComBig> */}
        {/* <ComFrom></ComFrom>
      <ComRef></ComRef> */}
        {/* <ComD></ComD> */}
        {/* <Transition3></Transition3> */}
        {/* <header className="App-header"> */}
        {/* 修改标签内容 */}
        {/* <p>名字：{name}</p>
        <p>年龄：{age}</p>
        <p>{hasWude?'':'不'}讲武德</p> */}
        {/* 修改标签属性 */}
        {/* 给属性值加上花括号，使他成为变量 */}
        {/* html中的class要换成className，js中的class还叫class */}
        {/* <img src={logo} className="App-logo" alt="logo" name1={name} /> */}
        {/* 循环渲染 */}
        {/* <ul>
          {
            kongFu.map(item => {
              return (<li key={item}>{item}</li>)
            })
          }
        </ul> */}
        {/* 不能直接显示对象，需要打点调用 */}
        {/* <p style={style1}>{person.age}</p> */}
        {/* 条件渲染 */}
        {/* {
          (function() {
            if(person.hasWude) {
              return <p>讲武德</p>
            }else {
              return <mark style={{'fontSize': fs}}>讲武德</mark>
            }
          })()
        }
      </header> */}
      </div>
    )
  }
}

export default withRouter(App)
